<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ彩贝导航</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			a{
				text-decoration: none;
				font-size: 20px;
				color: #373B3C;
				font-family: "宋体";
				font-weight: bold;
			}
			li{
				list-style: none;
				display: inline-block;
				width: 100px;
				border-right: 1px solid black;
				margin-left: 20px;
			}
			li:nth-of-type(7){
				border-right: none;
			}
			img,li{
				vertical-align: middle;
			}
			.u{
				width: 1100px;

				float: left;
				margin-left: 50px;
				margin-top: 40px;
				position: relative;
				
			}
			div{
				background-color: lavender;
				height: 100px;
				border: 1px solid blue;
			}
			div ul li  .icon1{
				display: block;
				position: absolute;
				top: -20px;
				left: 7px;
			}
			div ul li .icon2{
				position: absolute;
				top:-20px;
				left: 260px;
			}
			div ul li  .icon3{
				position: absolute;
				top: -20px;
				left: 7px;
				display: none;
			}
			div ul li .icon4{
				position: absolute;
				top:-20px;
				left: 260px;
				display: none;
			}
			@keyframes name{
				from{width: 0px;}
				to{width: 50px;}
			}
			#lia:hover .icon3{
				display: inline;
				animation:name 2s linear;
			}
			#lic:hover .icon4{
				display: inline;
				animation:name 2s linear;
			}
			div .img1{
				margin-left: 100px;
				margin-top: 20px;
				float: left;
			}
			div ul img{
				margin-left: 10px;
			}
			div ul>img:hover{
				transform: rotate(360deg) scale(1.5);
				transition: 2s;
			}
			a:hover{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<header>
			<nav>
				<div>
					<img class="img1" src="img/logo_170x46.png" />
					<ul class="u">
						<li id="lia">
							<span class="icon1"><img src="img/header_03.png" /> </span>
							<span class="icon3"><img src="img/header_05.png" /> </span>
							<a id="id1">返回商城 </a>
						</li>
						<li><a href="#">商旅频道 </a></li>
						<li  id="lic">
							<span  class="icon2"><img src="img/header_07.png" /> </span>
							<span class="icon4"><img src="img/header_09.png" /> </span>
							<a id="id2" href="#">积分商城</a>
						</li>
						<li><a href="#">商旅频道 </a></li>
						<li><a href="#">了解彩贝 </a></li>
						<li><a href="#">彩贝活动 </a></li>
						<li><a href="#">个人中心 </a></li>
						<img  src="img/iconsB_11.gif"/>
						<img src="img/iconsB_12.gif"/>
						<img src="img/iconsB_13.png"/>
					</ul>
				</div>
			</nav>
		</header>
	</body>
</html>
